<template>
  <div
    class="loading-spinner"
    :class="sizeClass"
  >
    <div
      class="spinner"
      :class="[colorClass, sizeClass]"
    >
      <div class="bounce1" />
      <div class="bounce2" />
      <div class="bounce3" />
    </div>
    <div
      v-if="text"
      class="loading-text"
      :class="textSizeClass"
    >
      {{ text }}
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  size: {
    type: String,
    default: 'medium',
    validator: (value) => ['small', 'medium', 'large'].includes(value)
  },
  color: {
    type: String,
    default: 'primary',
    validator: (value) => ['primary', 'secondary', 'white', 'gray'].includes(value)
  },
  text: {
    type: String,
    default: ''
  }
})

const sizeClass = computed(() => {
  const sizes = {
    small: 'w-4 h-4',
    medium: 'w-8 h-8', 
    large: 'w-12 h-12'
  }
  return sizes[props.size]
})

const colorClass = computed(() => {
  const colors = {
    primary: 'text-blue-600',
    secondary: 'text-gray-600',
    white: 'text-white',
    gray: 'text-gray-400'
  }
  return colors[props.color]
})

const textSizeClass = computed(() => {
  const sizes = {
    small: 'text-xs',
    medium: 'text-sm',
    large: 'text-base'
  }
  return sizes[props.size]
})
</script>

<style scoped>
.loading-spinner {
  @apply flex flex-col items-center justify-center;
}

.spinner {
  @apply relative;
}

.spinner > div {
  @apply w-full h-full rounded-full bg-current opacity-60 absolute top-0 left-0;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.bounce1 {
  animation-delay: -0.32s;
}

.bounce2 {
  animation-delay: -0.16s;
}

.loading-text {
  @apply mt-2 text-gray-600 font-medium;
}

@keyframes sk-bounce {
  0%, 80%, 100% { 
    transform: scale(0);
  } 40% { 
    transform: scale(1.0);
  }
}
</style>
